<template>
  <transition name="bounce" mode="out-in">
    <section class="mui-content meet-detail">
      <div class="detail-head">
        <router-link :to="{path: '/profile'}" class="mui-action-back mui-pull-left mh-back">
          <img src="../../assets/images/ico/ico_back.png" alt="返回">
        </router-link>
        <a href="#forward" class="ic-share mui-pull-right">
          <img src="../../assets/images/ico/ic_p_share.png" alt="分享">
        </a>
        <a href="javascript:" class="ic-export mui-pull-right">
          <img src="../../assets/images/ico/ic_p_export.png" alt="导出">
        </a>
      </div>
      <div class="avatar">
        <div class="avatar-pic-inner">
          <div class="avatar-pic">
            <img :src="info.portrait">
            <div class="ic-member"></div>
          </div>
        </div>

        <div class="match-maker" v-if='info.hong'>
          <div class="match-avatar" @tap="sawMe">
            <img src="https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=2159656631,1684778981&fm=26&gp=0.jpg" alt="红娘">
            <span>我的红娘</span>
          </div>
        </div>
      </div>

      <div class="main-info mui-text-center">
        <p class="flex-center">
          <span class="user-name">{{info.nickname}}</span>
        </p>
        <p class="sub-info">{{info.age}}岁 | {{info.height}} | {{info.province}}{{info.city}}</p>
        <div class="flex file-complete">
          <span class="complete-per">资料完整度 <span>60%</span></span>
          <p class="mui-progressbar mui-progressbar-success" data-progress="60"><span></span></p>
        </div>
      </div>

      <section class="detail-inner">
        <div class="mh-para">
          <div class="nav-link">
            <a class="mui-navigate-right">最近访客 </a>
            <!-- <span class="mui-pull-right">更多</span> -->
          </div>
          <div class="mh-para-cont">
            <div class="img-wrapper flex-bt">
              <div class="mui-text-center" v-for="item in dynamicPic" :key="item.id">
                <div class="img-box">
                  <img :src="item.imgSrc" :key="item.id" alt="照片">
                </div>
                <p>用户名</p>
              </div>
            </div>
          </div>
        </div>

        <div class="mh-para">
          <div class="nav-link">
            <a href="javascript:">我的才艺</a>
          </div>
          <div class="mh-para-cont">
            <div class="talent-wrapper flex">
              <div class="talent-list">
                <swiper :options="swiperOption" ref="talentSwiper">
                  <!-- slides -->
                  <swiper-slide v-for="item in talents" :key="item.id">
                    <img :src="item.imgSrc" alt="">
                  </swiper-slide>
                </swiper>
              </div>
              <div class="btn-more" @click="moreTalents">
                <img src="../../assets/images/ico/ico_more_cir.png" alt="更多才艺">
                <span>更多</span>
              </div>
            </div>
          </div>
        </div>

        <div class="mh-para">
          <div class="nav-link">
            <a href="javascript:">个人介绍</a>
            <button type="button" class="mui-btn mui-btn-outlined btn-edit mui-pull-right" @tap="introduceEdit">编辑</button>
          </div>
          <div class="mh-para-cont">
            <p class="intro">{{info.introduce}}</p>
          </div>
        </div>

        <div class="mh-para">
          <div class="nav-link">
            <a href="javascript:">颜值照片</a>
          </div>
          <div class="mh-para-cont">
            <img v-if='info.appearance' :src='info.appearance' class="yanzhi">
            <div class="yanzhi-input">
              <input type="file" @change='getYanzhi'>
            </div>
          </div>
        </div>

        <div class="mh-para">
          <div class="nav-link">
            <a href="javascript:">择偶意向</a>
            <button type="button" class="mui-btn mui-btn-outlined btn-edit mui-pull-right" @click='editInfo(1)'>编辑</button>
          </div>
          <div class="mh-para-cont">
            <ul class="info-list">
              <li class="flex intention">
                <span class="label">年龄：</span>
                <span :class="{active: intentionInfo.intention_age_start}"
                      v-text="!intentionInfo.intention_age_start ? '未填写' : intentionInfo.intention_age_start+'-'+intentionInfo.intention_age_end">00-00</span>
              </li>
              <li class="flex intention">
                <span class="label">身高：</span>
                <span :class="{active: intentionInfo.intention_height_start}"
                      v-text="!intentionInfo.intention_height_start ? '未填写' : intentionInfo.intention_height_start+'-'+intentionInfo.intention_height_end">--cm</span>
              </li>
              <li class="flex intention">
                <span class="label">体型：</span>
                <span :class="{active: intentionInfo.intention_shape}"
                      v-text="!intentionInfo.intention_shape ? '未填写' : intentionInfo.intention_shape">--</span>
              </li>
              <li class="flex intention">
                <span class="label">学历：</span>
                <span :class="{active: intentionInfo.intention_education}"
                      v-text="!intentionInfo.intention_education ? '未填写' : intentionInfo.intention_education">--</span>
              </li>
              <li class="flex intention">
                <span class="label">月收入：</span>
                <span :class="{active: intentionInfo.intention_income}"
                      v-text="!intentionInfo.intention_income ? '未填写' : intentionInfo.intention_income">--</span>
              </li>
              <li class="flex intention">
                <span class="label">居住地：</span>
                <span :class="{active: intentionInfo.intention_residence}"
                      v-text="!intentionInfo.intention_residence ? '未填写' : intentionInfo.intention_residence">--</span>
              </li>
              <li class="flex intention">
                <span class="label">婚姻状况：</span>
                <span :class="{active: intentionInfo.intention_marriage}"
                      v-text="!intentionInfo.intention_marriage ? '未填写' : intentionInfo.intention_marriage">--</span>
              </li>
              <li class="flex intention">
                <span class="label">购房情况：</span>
                <span :class="{active: intentionInfo.intention_house}"
                      v-text="intentionInfo.intention_house == '' ? '未填写' : intentionInfo.intention_house">--</span>
              </li>
              <li class="flex intention">
                <span class="label">有无子女：</span>
                <span :class="{active: intentionInfo.intention_children}"
                      v-text="!intentionInfo.intention_children ? '未填写' : intentionInfo.intention_children">--</span>
              </li>
            </ul>
          </div>
        </div>

        <div class="mh-para">
          <div class="nav-link">
            <a href="javascript:">兴趣爱好</a>
            <button type="button" class="mui-btn mui-btn-outlined btn-edit mui-pull-right" @tap="interestEdit">编辑</button>
          </div>
          <div class="mh-para-cont">
            <div class="mh-pd-lr">
              <span class="hobby" v-for="item in hobby" v-text="item">爱好</span>
            </div>
          </div>
        </div>

        <div class="mh-para">
          <div class="nav-link">
            <a href="javascript:">基本资料</a>
            <button type="button" class="mui-btn mui-btn-outlined btn-edit mui-pull-right" @click='editInfo(2)'>编辑</button>
          </div>
          <div class="mh-para-cont">
            <ul class="info-list">
              <li class="flex intention">
                <span class="label">ID：</span>
                <span :class="{active: baseInfo.user_id}"
                      v-text="!baseInfo.user_id ? '未填写' : baseInfo.user_id">--</span>
              </li>
              <li class="flex intention">
                <span class="label">交友状态：</span>
                <span :class="{active: baseInfo.id}"
                      v-text="!baseInfo.id ? '未填写' : '交友'">--</span>
                      <!--交友 脱单 征婚-->
              </li>
<!--               <li class="flex intention">
                <span class="label">倒计时：</span>
                <span :class="{active: baseInfo.id}"
                      v-text="!baseInfo.id ? '未填写' : '0年2月'">--</span>
              </li> -->
              <li class="flex intention">
                <span class="label">昵称：</span>
                <span :class="{active: baseInfo.nickname}"
                      v-text="!baseInfo.nickname ? '未填写' : baseInfo.nickname">--</span>
              </li>
              <li class="flex intention">
                <span class="label">性别：</span>
                <span :class="{active: baseInfo.gender}"
                      v-text="!baseInfo.gender ? '未填写' : baseInfo.gender">--</span>
              </li>
              <li class="flex intention">
                <span class="label">生日：</span>
                <span :class="{active: baseInfo.birthday}"
                      v-text="!baseInfo.birthday ? '未填写' : baseInfo.birthday">--</span>
              </li>
              <li class="flex intention">
                <span class="label">属相：</span>
                <span :class="{active: baseInfo.zodiac}"
                      v-text="!baseInfo.zodiac ? '未填写' : baseInfo.zodiac">--</span>
              </li>
              <li class="flex intention">
                <span class="label">星座：</span>
                <span :class="{active: baseInfo.constellation}"
                      v-text="!baseInfo.constellation ? '未填写' : baseInfo.constellation">--</span>
              </li>
              <li class="flex intention">
                <span class="label">身高：</span>
                <span :class="{active: baseInfo.height}"
                      v-text="!baseInfo.height ? '未填写' : baseInfo.height">--</span>
              </li>
              <li class="flex intention">
                <span class="label">学历：</span>
                <span :class="{active: baseInfo.education}"
                      v-text="!baseInfo.education ? '未填写' : baseInfo.education">--</span>
              </li>
              <li class="flex intention">
                <span class="label">职业：</span>
                <span :class="{active: baseInfo.occupation}"
                      v-text="!baseInfo.occupation ? '未填写' : baseInfo.occupation">--</span>
              </li>
              <li class="flex intention">
                <span class="label">婚姻状况：</span>
                <span :class="{active: baseInfo.marriage}"
                      v-text="!baseInfo.marriage ? '未填写' : baseInfo.marriage">--</span>
              </li>
              <li class="flex intention">
                <span class="label">子女情况：</span>
                <span :class="{active: baseInfo.children}"
                      v-text="!baseInfo.children ? '未填写' : baseInfo.children">--</span>
              </li>
              <li class="flex intention">
                <span class="label">所在地区：</span>
                <span :class="{active: baseInfo.province}"
                      v-text="!baseInfo.province ? '未填写' : baseInfo.province+baseInfo.city">--</span>
              </li>
              <li class="flex intention">
                <span class="label">家乡：</span>
                <span :class="{active: baseInfo.hometown}"
                      v-text="!baseInfo.hometown ? '未填写' : baseInfo.hometown">--</span>
              </li>
              <li class="flex intention">
                <span class="label">月收入：</span>
                <span :class="{active: baseInfo.income}"
                      v-text="!baseInfo.income ? '未填写' : baseInfo.income">--</span>
              </li>
              <li class="flex intention">
                <span class="label">购房情况：</span>
                <span :class="{active: baseInfo.house}"
                      v-text="!baseInfo.house ? '未填写' : baseInfo.house">--</span>
              </li>
              <li class="flex intention">
                <span class="label">居住状态：</span>
                <span :class="{active: baseInfo.liveStatus}"
                      v-text="!baseInfo.liveStatus ? '未填写' : baseInfo.liveStatus">--</span>
              </li>
              <li class="flex intention">
                <span class="label">购车情况：</span>
                <span :class="{active: baseInfo.car}"
                      v-text="!baseInfo.car ? '未填写' : baseInfo.car">--</span>
              </li>
              <li class="flex intention">
                <span class="label">微信号：</span>
                <span :class="{active: baseInfo.weixin}"
                      v-text="!baseInfo.weixin ? '未填写' : baseInfo.weixin">*********</span>
              </li>
              <li class="flex intention">
                <span class="label">手机号码：</span>
                <span :class="{active: baseInfo.phone}"
                      v-text="!baseInfo.phone ? '未填写' : baseInfo.phone">*********</span>
              </li>
              <li class="flex intention">
                <span class="label">电话号码：</span>
                <span :class="{active: baseInfo.telephone}"
                      v-text="!baseInfo.telephone ? '未填写' : baseInfo.telephone">*********</span>
              </li>
              <li class="flex intention">
                <span class="label">QQ：</span>
                <span :class="{active: baseInfo.qq}"
                      v-text="!baseInfo.qq ? '未填写' : baseInfo.qq">*********</span>
              </li>
              <li class="flex intention">
                <span class="label">其他方式：</span>
                <span :class="{active: baseInfo.other_model}"
                      v-text="!baseInfo.other_model ? '未填写' : baseInfo.other_model">*********</span>
              </li>
            </ul>
          </div>
        </div>

        <div class="mh-para">
          <div class="nav-link">
            <a href="javascript:">小档案</a>
            <button type="button" class="mui-btn mui-btn-outlined btn-edit mui-pull-right" @click='editInfo(3)'>编辑</button>
          </div>
          <div class="mh-para-cont">
            <ul class="info-list">
              <li class="flex intention">
                <span class="label">家乡：</span>
                <span :class="{active: fileInfo.hometown}"
                      v-text="!fileInfo.hometown ? '未填写' : fileInfo.hometown">--</span>
              </li>
              <li class="flex intention">
                <span class="label">户口：</span>
                <span :class="{active: fileInfo.registered_residence}"
                      v-text="!fileInfo.registered_residence ? '未填写' : fileInfo.registered_residence">--</span>
              </li>
              <li class="flex intention">
                <span class="label">民族：</span>
                <span :class="{active: fileInfo.nation}"
                      v-text="!fileInfo.nation ? '未填写' : fileInfo.nation">--</span>
              </li>
              <li class="flex intention">
                <span class="label">属相：</span>
                <span :class="{active: fileInfo.zodiac}"
                      v-text="!fileInfo.zodiac ? '未填写' : fileInfo.zodiac">--</span>
              </li>
              <li class="flex intention">
                <span class="label">星座：</span>
                <span :class="{active: fileInfo.constellation}"
                      v-text="!fileInfo.constellation ? '未填写' : fileInfo.constellation">--</span>
              </li>
              <li class="flex intention">
                <span class="label">血型：</span>
                <span :class="{active: fileInfo.blood_type}"
                      v-text="!fileInfo.blood_type ? '未填写' : fileInfo.blood_type">--</span>
              </li>
              <li class="flex intention">
                <span class="label">体型：</span>
                <span :class="{active: fileInfo.shape}"
                      v-text="!fileInfo.shape ? '未填写' : fileInfo.shape">--</span>
              </li>
              <li class="flex intention">
                <span class="label">体重：</span>
                <span :class="{active: fileInfo.weight}"
                      v-text="!fileInfo.weight ? '未填写' : fileInfo.weight">--</span>
              </li>
              <li class="flex intention">
                <span class="label">相貌自评：</span>
                <span :class="{active: fileInfo.looks}"
                      v-text="!fileInfo.looks ? '未填写' : fileInfo.looks">--</span>
              </li>
              <li class="flex intention">
                <span class="label">宗教信仰：</span>
                <span :class="{active: fileInfo.religion}"
                      v-text="!fileInfo.religion ? '未填写' : fileInfo.religion">--</span>
              </li>
              <li class="flex intention">
                <span class="label">是否喝酒：</span>
                <span :class="{active: fileInfo.is_drink}"
                      v-text="!fileInfo.is_drink ? '未填写' : fileInfo.is_drink">--</span>
              </li>
              <li class="flex intention">
                <span class="label">是否抽烟：</span>
                <span :class="{active: fileInfo.is_smoking}"
                      v-text="!fileInfo.is_smoking ? '未填写' : fileInfo.is_smoking">--</span>
              </li>
              <li class="flex intention">
                <span class="label">生活作息：</span>
                <span :class="{active: fileInfo.lifestyle}"
                      v-text="!fileInfo.lifestyle ? '未填写' : fileInfo.lifestyle">--</span>
              </li>
            </ul>
          </div>
        </div>

        <div class="mh-para">
          <div class="nav-link">
            <a href="javascript:">教育及工作</a>
            <button type="button" class="mui-btn mui-btn-outlined btn-edit mui-pull-right" @click='editInfo(4)'>编辑</button>
          </div>
          <div class="mh-para-cont">
            <ul class="info-list">
              <li class="flex intention">
                <span class="label">毕业院校：</span>
                <span :class="{active: educateWork.graduation}"
                      v-text="!educateWork.graduation ? '未填写' : educateWork.graduation">--</span>
              </li>
              <li class="flex intention">
                <span class="label">所属专业：</span>
                <span :class="{active: educateWork.major}"
                      v-text="!educateWork.major ? '未填写' : educateWork.major">--</span>
              </li>
              <li class="flex intention">
                <span class="label">职业职务：</span>
                <span :class="{active: educateWork.duties}"
                      v-text="!educateWork.duties ? '未填写' : educateWork.duties">--</span>
              </li>
              <li class="flex intention">
                <span class="label">公司性质：</span>
                <span :class="{active: educateWork.company_nature}"
                      v-text="!educateWork.company_nature ? '未填写' : educateWork.company_nature">--</span>
              </li>
              <li class="flex intention">
                <span class="label">公司行业：</span>
                <span :class="{active: educateWork.company_industry}"
                      v-text="!educateWork.company_industry ? '未填写' : educateWork.company_industry">--</span>
              </li>
              <li class="flex intention">
                <span class="label">工作状态：</span>
                <span :class="{active: educateWork.workStatus}"
                      v-text="!educateWork.workStatus ? '未填写' : educateWork.workStatus">--</span>
              </li>
              <li class="flex intention">
                <span class="label">掌握语言：</span>
                <span :class="{active: educateWork.language}"
                      v-text="!educateWork.language ? '未填写' : educateWork.language">--</span>
              </li>
            </ul>
          </div>
        </div>

        <div class="mh-para">
          <div class="nav-link">
            <a href="javascript:">家庭情况</a>
            <button type="button" class="mui-btn mui-btn-outlined btn-edit mui-pull-right" @click='editInfo(5)'>编辑</button>
          </div>
          <div class="mh-para-cont">
            <ul class="info-list">
              <li class="flex intention">
                <span class="label">家中排行：</span>
                <span :class="{active: family.ranking}"
                      v-text="!family.ranking ? '未填写' : family.ranking">--</span>
              </li>
              <li class="flex intention">
                <span class="label">父母情况：</span>
                <span :class="{active: family.parents}"
                      v-text="!family.parents ? '未填写' : family.parents">--</span>
              </li>
              <li class="flex intention">
                <span class="label">父亲工作：</span>
                <span :class="{active: family.father_work}"
                      v-text="!family.father_work ? '未填写' : family.father_work">--</span>
              </li>
              <li class="flex intention">
                <span class="label">母亲工作：</span>
                <span :class="{active: family.mother_work}"
                      v-text="!family.mother_work ? '未填写' : family.mother_work">--</span>
              </li>
              <li class="flex intention">
                <span class="label">父母经济：</span>
                <span :class="{active: family.parent_economics}"
                      v-text="!family.parent_economics ? '未填写' : family.parent_economics">--</span>
              </li>
              <li class="flex intention">
                <span class="label">父母医保：</span>
                <span :class="{active: family.parent_insurance}"
                      v-text="!family.parent_insurance ? '未填写' : family.parent_insurance">--</span>
              </li>
              <li class="flex intention">
                <span class="label">父母联系方式：</span>
                <span :class="{active: family.parent_contact}"
                      v-text="!family.parent_contact ? '未填写' : family.parent_contact">--</span>
              </li>
            </ul>
          </div>
        </div>

        <div class="mh-para">
          <div class="nav-link">
            <a href="javascript:">爱情规划</a>
            <button type="button" class="mui-btn mui-btn-outlined btn-edit mui-pull-right" @click='editInfo(6)'>编辑</button>
          </div>
          <div class="mh-para-cont">
            <ul class="info-list">
              <li class="flex intention">
                <span class="label">想何时结婚：</span>
                <span :class="{active: lovePlan.when_marry}"
                      v-text="!lovePlan.when_marry ? '未填写' : lovePlan.when_marry">--</span>
              </li>
              <li class="flex intention">
                <span class="label">愿与对方父母同住：</span>
                <span :class="{active: lovePlan.live_together}"
                      v-text="!lovePlan.live_together ? '未填写' : lovePlan.live_together">--</span>
              </li>
              <li class="flex intention">
                <span class="label">是否想要小孩：</span>
                <span :class="{active: lovePlan.want_kids}"
                      v-text="!lovePlan.want_kids ? '未填写' : lovePlan.want_kids">--</span>
              </li>
              <li class="flex intention">
                <span class="label">偏爱的约会方式：</span>
                <span :class="{active: lovePlan.tryst_model}"
                      v-text="!lovePlan.tryst_model ? '未填写' : lovePlan.tryst_model">--</span>
              </li>
              <li class="flex intention">
                <span class="label">希望对方看重：</span>
                <span :class="{active: lovePlan.hope_fancy}"
                      v-text="!lovePlan.hope_fancy ? '未填写' : lovePlan.hope_fancy">--</span>
              </li>
              <li class="flex intention">
                <span class="label">期待的婚礼形式：</span>
                <span :class="{active: lovePlan.wedding_form}"
                      v-text="!lovePlan.wedding_form ? '未填写' : lovePlan.wedding_form">--</span>
              </li>
              <li class="flex intention">
                <span class="label">厨艺状况：</span>
                <span :class="{active: lovePlan.cooking}"
                      v-text="!lovePlan.cooking ? '未填写' : lovePlan.cooking">--</span>
              </li>
              <li class="flex intention">
                <span class="label">家务分工：</span>
                <span :class="{active: lovePlan.housework}"
                      v-text="!lovePlan.housework ? '未填写' : lovePlan.housework">--</span>
              </li>
            </ul>
          </div>
        </div>

        <div class="mh-para">
          <div class="nav-link">
            <a href="javascript:">网友评级</a>
          </div>
          <div class="mh-para-cont">
            <p class="mh-pd-lr">{{info.grade}}</p>
          </div>
        </div>

      </section>

      <div id="forward" class="mui-popover mui-popover-action mui-popover-bottom">
        <ul class="mui-table-view">
          <li class="mui-table-view-cell">
            <a href="#">导出个人资料为PDF格式</a>
          </li>
          <li class="mui-table-view-cell">
            <a href="#">导出个人资料为图片格式</a>
          </li>
        </ul>
        <ul class="mui-table-view">
          <li class="mui-table-view-cell">
            <a href="#forward"><b>取消</b></a>
          </li>
        </ul>
      </div>
    </section>
  </transition>
</template>

<script>
  import {MH_API} from "@/api/api";
  import 'swiper/dist/css/swiper.css'
  import { swiper, swiperSlide } from 'vue-awesome-swiper'
  export default {
    name: "detail",
    data () {
      return {
        swiperOption: {
          loop: true,
          slidesPerView: 2,
          spaceBetween: 10,
          centeredSlides: true,
        },
        talents: [
          // {
          //   id: '1',
          //   imgSrc: 'https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=1713526531,3850193221&fm=26&gp=0.jpg'
          // },
          // {
          //   id: '2',
          //   imgSrc: 'https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=3029800330,458735988&fm=15&gp=0.jpg'
          // },
          // {
          //   id: '3',
          //   imgSrc: 'https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=3404613670,99136518&fm=15&gp=0.jpg'
          // },
          // {
          //   id: '4',
          //   imgSrc: 'https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=1261145105,2743696912&fm=15&gp=0.jpg'
          // }
        ],
        dynamicPic: [
          // {
          //   id: '1',
          //   imgSrc: 'https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=174864653,3708040406&fm=15&gp=0.jpg'
          // },
          // {
          //   id: '2',
          //   imgSrc: 'https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=3338827179,964526508&fm=15&gp=0.jpg'
          // },
          // {
          //   id: '3',
          //   imgSrc: 'https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=2349628112,3339301703&fm=15&gp=0.jpg'
          // },
          // {
          //   id: '4',
          //   imgSrc: 'https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=3129191916,673867751&fm=15&gp=0.jpg'
          // }
        ],
        intentionInfo: {
          age: '20-27',
          height: '170cm',
          bodyType: '偏瘦',
          edu: '',
          income: '',
          address: '',
          marriage: '',
          house: '',
          child: ''
        },
        baseInfo: {
          id: '54815223333',
          nickname: 'Darvin',
          sex: '男',
          birthday: '',
          zodiac: '',
          height: '',
          constellation: '',
          edu: '',
          career: '',
          marriage: '',
          child: '',
          city: '',
          hometown: '',
          income: '',
          house: '',
          liveStatus: '',
          car: '',
          wechat: '',
          phone: '',
          tel: '',
          qq: '',
          other: ''
        },
        fileInfo: {
          hometown: '北京',
          account: '东城区',
          nationality: '汉族',
          zodiac: '',
          constellation: '',
          blood: '',
          bodyType: '',
          weight: '',
          selfEvaluation: '',
          faith: '',
          drink: '',
          smoke: '',
          lifestyle: ''
        },
        educateWork: {
          graduatedSchool: '',
          profession: '',
          position: '',
          comType: '',
          comIndustry: '',
          workStatus: '',
          lang: ''
        },
        family: {
          ranking: '老大',
          parents: '公务员',
          father: '',
          mother: '',
          parentsEconomic: '',
          parentsMedical: '',
          parentsContact: ''
        },
        lovePlan: {
          marryTime: '',
          willingLiveParents: '',
          wilingChild: '',
          preferDating: '',
          hopeValue: '',
          expectWedding: '',
          cooking: '',
          houseWork: ''
        },
        hobby: ['汽车','旅游','阅读','跳伞'],
        guessLike: [
          {
            id: '1',
            name: '张兔兔',
            avatar: 'https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=1773633298,2629220769&fm=26&gp=0.jpg'
          },
          {
            id: '2',
            name: '王兔兔',
            avatar: 'https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=2000417879,3233091669&fm=15&gp=0.jpg'
          },
          {
            id: '3',
            name: '李兔兔',
            avatar: 'https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=1738636455,3694468788&fm=15&gp=0.jpg'
          },
          {
            id: '4',
            name: '张兔兔',
            avatar: 'https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=1773633298,2629220769&fm=26&gp=0.jpg'
          }

        ],
        info: {}
      }
    },
    computed: {
      swiper() {
        return this.$refs.talentSwiper.swiper
      }
    },
    mounted () {
      // let userId = this.$route.query.id;
      // console.log(userId)
      console.log('this is current swiper instance object', this.swiper);
      this.swiper.slideTo(3, 1000, false)
    },
    created () {
      this.$nextTick(function() {
        mui('.mui-progressbar').each(function () {
          mui(this).progressbar({progress:this.getAttribute("data-progress")}).show();
        });
      });
      let id = window.localStorage.getItem("userid") || 1103;
      this.id = id;
      let self = this;
      let params = {
        id: id
      };
      let birthday = 0;
      MH_API.getUserInfo(params).then(res => {
        if (res.status === 200) {
          self.info = res.data;
          self.intentionInfo = res.data;//择偶
          self.baseInfo = res.data;//基本信息
          self.fileInfo = res.data;//小档案
          self.educateWork = res.data;//教育及工作
          self.family = res.data;
          self.lovePlan = res.data;
          birthday = res.data.birthday.slice(0, 10);
          self.info.age = jsGetAge(birthday);
          //self.dynamicPic = res.data.images;
        }
      })
      MH_API.getTalent({
        id: id,
        page: 1,
        limit: 10
      }).then(res => {
        if (res.status === 200) {
          //self.talents = res.data;
        }
      })

      /*根据出生日期算出年龄*/
      function jsGetAge(strBirthday){       
          var returnAge;
          var strBirthdayArr=strBirthday.split("-");
          var birthYear = strBirthdayArr[0];
          var birthMonth = strBirthdayArr[1];
          var birthDay = strBirthdayArr[2];
          
          var d = new Date();
          var nowYear = d.getFullYear();
          var nowMonth = d.getMonth() + 1;
          var nowDay = d.getDate();
          
          if(nowYear == birthYear){
              returnAge = 0;//同年 则为0岁
          }
          else{
              var ageDiff = nowYear - birthYear ; //年之差
              if(ageDiff > 0){
                  if(nowMonth == birthMonth) {
                      var dayDiff = nowDay - birthDay;//日之差
                      if(dayDiff < 0)
                      {
                          returnAge = ageDiff - 1;
                      }
                      else
                      {
                          returnAge = ageDiff ;
                      }
                  }
                  else
                  {
                      var monthDiff = nowMonth - birthMonth;//月之差
                      if(monthDiff < 0)
                      {
                          returnAge = ageDiff - 1;
                      }
                      else
                      {
                          returnAge = ageDiff ;
                      }
                  }
              }
              else
              {
                  returnAge = -1;//返回-1 表示出生日期输入错误 晚于今天
              }
          }
          
          return returnAge;//返回周岁年龄
      }
    },
    methods: {
      getYanzhi(e){
        let self = this;
        let formData = new FormData();
        formData.append('file', e.target.files[0]);
        formData.append('token', window.localStorage.getItem("uploadToken"));
        mui.toast('上传中');
        MH_API.uploadImg(formData).then(res => {
          if (res.key) {
            //mui.toast('上传成功');
            let url = MH_API.QN_url+res.key;
            console.log(url)
            MH_API.putAppearance({
              image: url
            }).then(res => {
              if (res.status === 200) {
                //self.talents = res.data;
                mui.toast('上传成功');
              }
            })
          }
        })
      },
      editInfo(type){
        let self = this;
        this.$router.push({
          path: '/profile/detail/edit',
          query: {
            id: self.id,
            type: type
          }
        })
      },
      sawMe () {
        this.$router.push({
          path: '/meet/detail',
          query: {
            id: 1103
          }
        })
      },
      moreTalents () {
        this.$router.push({
          path: '/meet/talents',
          query: {
            id: '12445'
          }
        })
      },
      interestEdit () {this.$router.push({path: '/profile/interest'})},
      introduceEdit () {this.$router.push({path: '/profile/introduction'})}
    },
    components: {
      swiper,
      swiperSlide
    }
  }
</script>

<style lang="scss" scoped>
  @import "../../assets/css/mixin";
  .swiper-container {
    width: 100%;
    height: 100%;
  }
  .swiper-slide {
    text-align: center;
    background: #eee;
    display: flex;
    justify-content: center;
    align-items: center;
    img {
      width: 100%;
      height: 100%;
    }
  }
  .meet-detail {
    width: 100%;
    height: 100%;
    background: url("../../assets/images/bg/bg_detail.png") no-repeat left top;
    background-size: 100% 12.5rem;
    overflow: auto;
    .detail-inner {background: #fff;}
  }
  .detail-head {padding: 0;overflow: auto;}
  .ic-share {
    margin-top: .5rem;
    margin-right: 1.5rem;
    img {width: 1.85rem;height: auto;}
  }
  .ic-export {
    margin-top: .5rem;
    margin-right: 1.5rem;
    img {width: 2rem;height: auto;}
  }
  .avatar {
    position: relative;
    width: 100%;
    height: 8.5rem;
  }
  .avatar-pic-inner {
    @include cl;
    width: 7rem;
    height: 7rem;
    border-radius: 100%;
    /*overflow: hidden;*/
    border: 3px solid rgba(255, 255, 255, .8);
    background-color: #999999;
    bottom: 0;
  }
  .avatar-pic {
    position: relative;
    height: 100%;
    img {
      width: 100%;
      height: 100%;
      border-radius: 100%;
    }
    .ic-member {
      position: absolute;
      width: 3rem;
      height: 3rem;
      background: url("../../assets/images/ico/ico_member.png") no-repeat center;
      background-size: 100% 100%;
      right: 0;
      top: -2rem;
      z-index: 4;
    }
  }
  .yanzhi{ float: left; width:10rem; height: 10rem; border-radius: 0.5rem; margin: 0 1rem; display: inline-block;}
  .yanzhi-input{ display: inline-block; width:10rem; height:10rem; background-color:#eee; border-radius:0.5rem; overflow:hidden; position:relative;}
  .yanzhi-input input{ height:10rem; width:10rem; opacity:0;}
  .yanzhi-input::after{ content: '+'; position:absolute; top:4.2rem; left:4.2rem; z-index:100; color:#ccc;}
  .match-maker {
    @include ct;
    right: 0;
  }
  .match-avatar {
    float: right;
    display: flex;
    align-items: center;
    width: 9.6rem;
    height: 3.6rem;
    padding: .3rem;
    @include sc(1.2rem, #fff);
    background: #7f9ba7;
    border-top: .1rem solid #fff;
    border-bottom: .1rem solid #fff;
    border-top-left-radius: 1.75rem;
    border-bottom-left-radius: 1.75rem;
    img {
      width: 3rem;
      height: 3rem;
      margin-right: .4rem;
      border-radius: 100%;
    }
  }
  .main-info {
    margin: 1.2rem 0;
    .sub-info {@include sc(1.2rem, #666);}
  }
  .user-name {@include sc(1.5rem, #333);}
  .img-box {
    @include mh-avatar-box(4.5rem,4.5rem);
    margin-bottom: .5rem;
    background-color: #eeeeee;
  }
  .mh-para {
    padding-bottom: 1rem;
    background: #fff;
    border-bottom: 1px solid #eee;
    h4 {padding: 1.5rem;}
    .img-wrapper {padding: 0 1.5rem;}
    &.border {
      margin-top: 1.5rem;
      border-top: .05rem solid #eee;
    }
  }
  .talent-wrapper {
    width: 100%;
    height: 10rem;
    padding-right: 1.5rem;
    .talent-list {
      height: 10rem;
      overflow: hidden;
      flex: 1;
    }
    .btn-more {
      display: flex;
      height: 100%;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      width: 4.75rem;
      float: right;
      @include sc(1.2rem, #999);
      background: #fff;
      img {
        width: 2rem;
      }
    }
  }
  .intro {
    @include sc(1.2rem, #999);
    padding: 0 1.5rem;
  }
  .link-pink {@include sc(1.2rem, #eb537f);}
  .info-list {
    padding: 0 1.5rem;
    .intention {
      padding: .6rem 0;
    }
    span {
      width: 50%;
      @include sc(1.2rem, #999);
      &.active {color: #666;}
    }
  }

  .hobby {
    padding: .3rem .9rem;
    margin-right: 1rem;
    color: #fff;
    font-size: 1.2rem;
    border-radius: 1.2rem;
    background-image: linear-gradient(180deg, #dd65a1 20%,#fa625a 100%);
  }

  .mh-back {
    width: 3rem;
    height: 3rem;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
    img {
      height: 1.75rem;
    }
  }
  .file-complete {
    justify-content: center;
    .complete-per {@include sc(1.2rem, #666);}
  }
  .mui-progressbar {
    width: 25%;
    height: .5rem;
    margin-left: 1rem;
    background: #eee;
    border-radius: .4rem;
    span {
      border-radius: .4rem;
      background: linear-gradient(180deg, #dd65a1 0%, #fa625a 100%);
    }
  }
  .nav-link {
    position: relative;
    padding-left: 1.5rem;
    margin-top: 1rem;
    margin-bottom: 1rem;
    a {@include sc(1.4rem, #333);}
    span {@include sc(1.2rem, #999);margin-right: 2.5rem;}
    .btn-edit {
      margin-right: 1.5rem;
      padding: .1rem .6rem;
      @include sc(1.2rem, #f26c60);
      border: 1px solid #f26c60;
    }
  }
  .mui-table-view-cell>a:not(.mui-btn) {
    @include sc(1.5rem, #333);
  }
</style>
